<template>
  <!-- 遮罩层 -->
  <div
      v-if="visible"
      class="modal-backdrop"
      @click="handleBackdropClick"
  ></div>

  <!-- 模态框主体 -->
  <div
      v-if="visible"
      class="modal-container"
      :class="{ 'with-transition': transition }"
  >
    <div class="modal-content">
      <!-- 头部 - 包含标题和关闭按钮 -->
      <div class="modal-header">
        <h3 class="modal-title">{{ title }}</h3>
        <button
            v-if="showClose"
            class="modal-close"
            @click="handleClose"
            aria-label="关闭"
        >
          <Icon name="material-symbols:close" class="close-icon" />
        </button>
      </div>

      <!-- 内容区域 - 插槽 -->
      <div class="modal-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

// 定义组件属性
const props = defineProps({
  // 控制模态框显示/隐藏
  visible: {
    type: Boolean,
    default: false
  },
  // 模态框标题
  title: {
    type: String,
    default: ''
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true
  },
  // 是否启用过渡动画
  transition: {
    type: Boolean,
    default: true
  },
  // 点击遮罩层是否关闭
  closeOnBackdrop: {
    type: Boolean,
    default: true
  }
});

// 定义事件
const emit = defineEmits(['close']);

// 处理关闭事件
const handleClose = () => {
  emit('close');
};

// 处理遮罩层点击
const handleBackdropClick = () => {
  if (props.closeOnBackdrop) {
    emit('close');
  }
};
</script>

<style scoped>
/* 遮罩层样式 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* 模态框容器 */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  padding: 20px;
}

/* 模态框内容 */
.modal-content {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

/* 头部样式 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
}

/* 关闭按钮 */
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.modal-close:hover {
  background-color: #f5f5f5;
}

.close-icon {
  font-size: 1.2rem;
  color: #666;
}

/* 内容区域 */
.modal-body {
  padding: 24px;
}

/* 过渡动画 */
.with-transition .modal-content {
  animation: modalFadeIn 0.3s ease-out;
}

.with-transition .modal-backdrop {
  animation: backdropFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 深色模式适配 */
.dark-theme .modal-content {
  background-color: #2d2d2d;
}

.dark-theme .modal-header {
  border-bottom-color: #444;
}

.dark-theme .modal-title {
  color: #f0f0f0;
}

.dark-theme .close-icon {
  color: #bbb;
}

.dark-theme .modal-close:hover {
  background-color: #3a3a3a;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .modal-content {
    max-width: 100%;
    border-radius: 8px;
  }

  .modal-header {
    padding: 14px 18px;
  }

  .modal-body {
    padding: 18px;
  }

  .modal-title {
    font-size: 1.1rem;
  }
}
</style>
